<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width; initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Demo: SwipeSlide.js</title>
  <script src="lib/zepto.min.js" type="text/javascript"></script>
  <script src="../swipeslide.js" type="text/javascript"></script>

  <link rel="stylesheet" href="../swipeslide.css" type="text/css" charset="utf-8">  
  <style type="text/css" media="screen">
  header,footer,article,section,figure,figcaption {display: block;}
  body,ul,li,figure {margin:0;padding:0;}
  body {
    font: 16px/24px Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust:none;
    text-rendering: optimizeLegibility;
  }

  header { padding: 20px 60px; color: #fff; background: #000;}

  #g3 {
    background: #222;
    height: 200px;
    margin: 20px auto;
    max-width:600px
  }
  #g3 ul { height:100%}
  #g3 li { width:100%; height:100%; }
  
  #g2 {
    border:10px solid yellow;
    height:300px;
    width:300px;
    margin: 0 auto;
  }
  #dashboard-widgets {
    background:#333;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    box-shadow: 0 2px 5px #000 inset;
  }
  #dashboard-widgets .ui-swipeslide-slide {
    padding: 10px;
  }
  #dashboard-widgets div {
    border-radius:10px;
    padding:40px 10px;
    font-size:3em;
    text-align:center;
    text-shadow: 0 1px rgba(255,255,255,0.4);
    box-shadow: 0 2px 5px #000, 0 0px 2px #fff inset;
    overflow:hidden
  }

  #dashboard-widgets .ui-swipeslide-nav li {
    width: 20px
  }
  </style>
  <script type="text/javascript">

  $(document).ready(function() {
    new SwipeSlide($('#g3'), { first: 3, callback: function(index, s){ console.log(index) }})
    new SwipeSlide($('#g2'), {vertical: true, visibleSlides: 3})
    new SwipeSlide($('#dashboard-widgets'), {visibleSlides: 6, directionalNavigation: true, bulletNavigation: false})
    
//    $('#g3').swipeSlide({ first: 3, callback: function(index, s){ console.log(index) }})
  })

  </script>
</head>
<body>
  
  <header>
    <h1>SwipeSlide</h1>
  </header>

  <div id="g3"><!-- container -->
    <ul><!-- reel -->
      <li style="background: #ff0;"><div>1</div></li><!-- slide -->
      <li style="background: #990;"><div>2</div></li>
      <li style="background: #0f0;"><div>3</div></li>
      <li style="background: #0f9;"><div>4</div></li>
      <li style="background: #0ff;"><div>5</div></li>
      <li style="background: #09f;"><div>6</div></li>
    </ul>
  </div>
  
  <div id="g2"><!-- container -->
    <ul><!-- reel -->
      <li style="background: #ff0;"><div>1</div></li><!-- slide -->
      <li style="background: #990;"><div>2</div></li>
      <li style="background: #0f0;"><div>3</div></li>
      <li style="background: #0f9;"><div>4</div></li>
      <li style="background: #0ff;"><div>5</div></li>
      <li style="background: #09f;"><div>6</div></li>
    </ul>
  </div>


  <div id="dashboard-widgets"><!-- container -->
    <ul><!-- reel -->
      <li><div style="background: #E01B1B;">1</div></li><!-- slide -->
      <li><div style="background: #E0A21B;">2</div></li>
      <li><div style="background: #E0E01B;">3</div></li>
      <li><div style="background: #74E01B;">4</div></li>
      <li><div style="background: #1BE063;">5</div></li>
      <li><div style="background: #1BE0CC;">6</div></li>
      <li><div style="background: #1B91E0;">7</div></li><!-- slide -->
      <li><div style="background: #1B49E0;">8</div></li>
      <li><div style="background: #461BE0;">9</div></li>
      <li><div style="background: #871BE0;">10</div></li>
      <li><div style="background: #D01BE0;">11</div></li>
      <li><div style="background: #E01BA2;">12</div></li>
      <li><div style="background: #E01B46;">13</div></li><!-- slide -->
      <li><div style="background: #990;">14</div></li>
      <li><div style="background: #0f0;">15</div></li>
    </ul>
    <p style="float:right;padding:0;margin:10px;color:#c0c0c0;font-size:12px">
      <a class="first">First</a> |
      <a class="prev">Prev</a> |
      <a class="next">Next</a> |
      <a class="last">Last</a>
    </p>
    <pre style="padding:0;margin:10px;color:#c0c0c0;font-size:12px">new SwipeSlide($('#dashboard-widgets'), {visibleSlides: 6})</pre>
  </div>

</body>
</html>
